<template>
	<w-container :loading='loading'>
		<w-navbar id="my-nav" :title="pageType==2?'寄售藏品':'寄售盲盒'" bgColor="#F5F5F5"></w-navbar>
		<view class="pa-16">
			<view class="bg-color-white br-12 pa-16">
				<view class="flex flex-ai-center">
					<image :src="$ossUrl+details.product.listimg" class="collect-image"></image>
					<view class="flex flex-dir-col ml-16">
						<view class="font-w-500 font-size-18 font-color-textPrimary" >{{ details.product.name && handleLang(details.product.name) }}</view>
						<block v-if="pageType==2">
							<view class="font-size-12 mt-8 font-color-textPrimary">#{{ details.product.collection_code || details.collection_code }}</view>
							<view class="lsbs-box mt-8">
								<text>链上标识：</text>
								<text v-if="details.user_hash_text">{{ details.user_hash_text }} </text>
								<text v-else>上链中</text>
							</view>
						</block>
					</view>
				</view>
				<view class="font-size-16 font-w-500 mt-24 font-color-textPrimary">
					<text>设置售价</text>
					<text class="font-size-12 ml-4" style="color: #686868;">您的买入价格(元)：￥{{ details.from_price || '--' }}</text>
				</view>
				<view class="flex flex-ai-center mt-12 br-8">
					<text class="font-size-16 font-color-textPrimary mr-8">￥</text>
					<input type="number" v-model="sellingPrice" @input="iptSellingPrice" style="color:#000;" :placeholder="handleLang('请输入售价')" placeholder-class="font-color-describe" />
				</view>
			</view>
			<!-- 藏品信息 -->
			<!-- <view class="card">
				<image :src="$ossUrl+details.product.listimg" mode="widthFix" class="banner"></image>
				<view class="font-size-16 font-color-textPrimary font-w-500 mtb-8">{{ details.product.name && handleLang(details.product.name) }}</view>
				
				<block v-if="pageType==2">
					<view class="flex-center-sb" style="height: 104rpx;">
						<text class="font-size-14 font-color-999">{{handleLang('藏品编号')}}</text>
						<text class="font-size-14 font-color-textPrimary font-w-500">#{{ details.product.collection_code || details.collection_code }}</text>
					</view>
					<view class="flex-center-sb" style="height: 104rpx;">
						<text class="font-size-14 font-color-999">{{handleLang('合约地址')}}</text>
						<view v-if="details.user_hash_text" class="flex-center font-size-14 font-color-textPrimary">{{ details.user_hash_text }} 
							<w-icon @click="$tools.copyText(details.user_hash)" name="copy-dark" class="ml-4" ></w-icon>
						</view>
						<view v-else class="font-size-14 font-color-describe">{{handleLang('上链中')}}</view>
					</view>
				</block>
			</view> -->
			<!-- 设置售价 -->
			<!-- <view class="card">
				<view class="flex-center-sb">
					<text class="font-size-14 font-color-textPrimary">{{handleLang('设置售价')}}</text>
					<text class="font-size-12 font-color-describe" v-if="details.from_price">（{{handleLang('您的买入价')}}：¥{{ details.from_price }}）</text>
				</view>
				<view class="ipt-price mt-12 br-8">
					<text class="font-size-16 font-color-textPrimary mr-8">￥</text>
					<input type="number" v-model="sellingPrice" @input="iptSellingPrice" style="color:#000;" :placeholder="handleLang('请输入寄售价格')" placeholder-class="font-color-describe" />
				</view>
			</view> -->
			
			<!-- 收入账号 -->
			<w-radio-account class="mt-8" @changeIncome="income_type=$event"></w-radio-account>
			
			<view class="card">
				<view class="font-size-14 font-w-500 font-color-textPrimary mb-12">{{handleLang('预计收入')}}</view>
				<view class="flex-center-sb ptb-16 ">
					<text class="font-size-14 font-color-999">{{handleLang('总售价')}}:</text>
					<view class="font-size-14 font-color-textPrimary">
						<text v-if="id.split(',').length>1&&sellingPrice" class="font-size-12 font-color-999">
							￥{{sellingPrice}}x{{id.split(',').length}}=
						</text>
						¥{{ totalPrice }}</view>
				</view>
				<view class="flex-center-sb ptb-16">
					<text class="font-size-14 font-color-999">{{handleLang('综合服务费')}} ({{ Number( (rate*100).toFixed(2) ) }}%)</text>
					<text class="font-size-14 font-color-textPrimary">- ¥{{servicePrice }}</text>
				</view>
				<view class="flex-center-sb ptb-16">
					<text class="font-size-14 font-color-999">{{handleLang('版权服务费')}} ({{ pre().share_proportion_rate }}%)</text>
					<text class="font-size-14 " style="color: #EF4B18;">- ¥{{ pre().copyPre }}</text>
				</view>
				<view class="flex-center-sb ptb-16">
					<text class="font-size-14 font-color-999">{{handleLang('预计收入')}}</text>
					<text class="font-size-14 font-color-textPrimary">¥{{ incomePrice }}</text>
				</view>
			</view>
			<!-- 寄售须知 -->
			<view class="card">
				<view class="title font-color-textPrimary font-size-16">
					上架
				</view>
				<!-- <w-big-title title=""></w-big-title> -->
				<view class="mt-12">
					<u-parse :content='handleLang(consignment_sales)' style="color:#999"></u-parse>
				</view>
			</view>
		</view>
		<u-gap height="100"></u-gap>
		<view class="footer bg-color-pageBg">
			<view class="button flex-center-sb">
				<w-button type="colorful" :disabled="isDisabled" class="flex-1" @click.native="openToast" @click="confirmConsignment">{{handleLang('确认寄售')}}</w-button>
			</view>
		</view>
		<!-- 确认弹窗 -->
		<w-toast 
		v-model="showPop" 
		:title="`￥${sellingPrice}`" 
		:content="handleLang(`您确认以${sellingPrice}元出售吗?`)" 
		contentAlign="center" @action="popConfim"></w-toast>
		<!-- 低于市场价确认 -->
		<w-modal v-model="showPop2" title="再次确认" @action="$event && (showPop3=true)">
			<view class="low_pop_con">
				<view class="price" style="color: #222;">{{ sellingPrice }}</view>
				<view class="font-size-14 font-color-222 mtb-12">{{handleLang('您的寄售价格低于目前市场最低价20%以上,确认寄售吗?')}}</view>
				<view class="flex">
					<text class="font-size-14 font-color-describe">{{handleLang('目前最低价位')}}：</text>
					<text class="price2 font-size-10">{{ low_price }}</text>
				</view>
				<view class="flex mt-8">
					<text class="font-size-14 font-color-describe">{{handleLang('中文金额')}}：</text>
					<text class="font-color-warning font-size-14">{{ low_price_text }}</text>
				</view>
				<view class="hint">（{{handleLang('市场价格实时变动中,最低价格仅供参考')}}）</view>
			</view>
		</w-modal>
		<!-- 最终确认 -->
		<w-toast 
		v-model="showPop3" 
		:title="handleLang('最终确认')" 
		:content="handleLang('您的寄售价格低于目前市场最低价20%,确认寄售后造成的损失将由您个人承担,确认寄售?')" 
		@action="pwdPop = true"></w-toast>
		<!-- 密码验证 -->
		<password-authentification 
		ref="pwdAuth" 
		v-model="pwdPop" 
		:price="sellingPrice"
		:payType="income_type"
		@finish="confim"
		></password-authentification>
		
		<!-- 密码错误 -->
		<w-toast 
		v-model="showPop4" 
		:cancelText="handleLang('忘记密码')"
		:submitText="handleLang('重试')"
		:title="handleLang('操作密码错误，请重试')" 
		@action="wrongPassword"></w-toast>
	</w-container>
</template>

<script>
	import { mapState } from 'vuex';
	import { getUserCollectionDetails,getSellConfig,sellProduct } from '@/api/collection/index.js';
	export default {
		data() {
			return {
				showPop: false,
				showPop2: false,
				showPop3: false,
				showPop4: false,
				pwdPop: false,
				sellingPrice:'',  // 售价
				low_price:0,      // 市场最低价位
				rate:0,           // 费率
				share_proportion_rate:0, //版权服务费
				id:'',
				pageType: '',     // 1藏品 2盲盒
				loading:'none',
				low_price_text:false,
				details:{
					product:{}
				},
				
				income_type:[],  // 收入账号
			};
		},
		computed:{
			...mapState('config',{
				consignment_sales(state){
					return state.info.consignment_sales
				}
			}),
			isDisabled(){
				if(!this.income_type.length || Number(this.sellingPrice)<=0){
					return true
				}else{
					return false
				}
			}, 
			totalPrice(){
				let len=this.id.split(',').length;
				return this.sellingPrice*len
			},
			servicePrice(){
				return (this.totalPrice*this.rate).toFixed(2)
			},
			incomePrice(){
				return (this.totalPrice-this.servicePrice).toFixed(2)
			}
		},
		onLoad({id,pageType}){
			this.pageType = pageType;
			this.id = id;
			this.getDetails();
			this.getRate();
		},
		methods:{
			openToast() {
				if (!this.sellingPrice) {
					uni.$u.toast('请输入寄售价格');
				} else if (!this.income_type.length) {
					uni.$u.toast('请选择收入账号');
				}
			},
			confirmConsignment() {
				if(Number(this.sellingPrice)>Number(this.details.product.reprice_limit)){
					uni.$u.toast(`该藏品寄售价格不得高于${this.details.product.reprice_limit}元`);
				}else{
					this.showPop = true;
				}
			},
			iptSellingPrice(e){
				this.$nextTick(()=>{
					this.sellingPrice = Math.floor(e.detail.value)
				})
			},
			// 获取详情
			getDetails() {
				this.loading = true;
				getUserCollectionDetails(this.id.split(',')).then(res=>{
					this.loading = false;
					this.details = res.data;
				}).catch(err=>{ this.loading = false; })
			},
			
			// 获取费率
			getRate() {
				getSellConfig(this.id.split(',')[0]).then(res=>{
					let { pay_platform_service_rate,low_price,low_price_text,share_proportion_rate } = res.data;
					this.rate = pay_platform_service_rate;
					this.low_price = low_price;
					this.low_price_text=low_price_text;
					this.share_proportion_rate = share_proportion_rate;
				}).catch(()=>{})
			},
			
			// 第一次弹窗确认
			popConfim(e) {
				if(!e) return;
				// 市场价20%
				let low_20 = this.low_price * 0.20;
				if(Number(this.sellingPrice) <  Number(low_20)){
					this.showPop2 = true
				}else{
					this.pwdPop = true
				}
			},
			
			// 价格计算
			pre() {
				let obj = {
					// 总售价
					totalPre: this.sellingPrice,
					// 综合服务费率
					rate: (this.rate * 100).toFixed(2),
					// 综合服务费
					servicePre: (this.sellingPrice * this.rate).toFixed(2),  
					// 版权费率
					share_proportion_rate: (this.share_proportion_rate * 100).toFixed(2),
					// 版权费用
					copyPre: (this.sellingPrice * this.share_proportion_rate).toFixed(2),
					// 预计收入
					incomePre: function() {
						return (Number(this.totalPre) - this.servicePre - this.copyPre).toFixed(2)
					},
				}
				return obj
			},
			
			// 提交
			confim(e) {
				uni.showLoading()
				sellProduct({
					user_collection_id:this.id,
					price:this.sellingPrice,
					pay_password:e,
					income_type: this.income_type.join(',')
				}).then(res=>{
					this.pwdPop = false;
					this.$refs.pwdAuth.$data.pwd = '';
					if(res.data && res.data.password_error==1){
						this.showPop4 = true;
					}else{
						if(res.data) {
							uni.$u.route('/pages/order/marketDetail',{id:res.data.id})
						}else {
							uni.showToast({
								title:'转售成功'
							})
							setTimeout(() => {
								uni.switchTab({
									url:'/pages/my/my'
								})
							},1000)
						}
					}
				}).catch(()=>{
					this.$refs.pwdAuth.$data.pwd = '';
				})
			},
			
			wrongPassword(e) {
				if(!e){
					uni.$u.route('/pages/my/actionPwd/getCode',{action:'reset'})
				}
			}
		}
	}
</script>

<style lang="scss">
	.page-bg {
		padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);
	}
	.collect-image {
		width: 168rpx;
		height: 168rpx;
		border-radius: 24rpx;
	}
	.lsbs-box {
		height: 52rpx;
		background: #FEE3AC;
		border-radius: 26rpx;
		padding: 16rpx;
		font-family: OPPO Sans 4.0, OPPO Sans 40;
		font-weight: 500;
		font-size: 22rpx;
		color: #6E5324;
	}
	.card{
		@extend .pa-12,.bg-color-item,.br-12,.mb-12;
		>.banner{
			width: 100%;
			height: 320rpx;
			display: block;
			border-radius: 16rpx;
		}
		>.ipt-price{
			width: 100%;
			height: 86rpx;
			background: linear-gradient(209deg, #f5f5f5 0%, #f5f5f5 36%, #f5f5f5 100%);
			@extend .flex-center;
			>input{
				width: 200rpx;
				height: 100%;
				font-size: 28rpx;
				color: #000;
				line-height: 86rpx;
				text-align: center;
			}
		}
		>.title{
			// font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
			// background: linear-gradient(90deg, #DF0007 0%, rgba(0,102,254,0) 100%);
			background-size:40rpx 16rpx;
			background-position:left 16rpx;
			background-repeat: no-repeat;
			font-weight: 500;
		}
	}
	.footer {
		width: 750rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
		>.button{
			padding: 12rpx 32rpx;
		}
	}
	.low_pop_con{
		width: 100%;
		margin-top: 40rpx;
		>.price{
			width: 100%;
			text-align: center;
			@extend .font-size-24,.font-color-price,.font-w-500;
			&::before{
				content: '￥';
				font-size: 24rpx;
			}
		}
		.price2{
			font-size: 28rpx;
			color: #FF1F00;
			&::before{
				content: '￥';
				font-size: 20rpx;
			}
		}
		>.hint{
			width: 100%;
			text-align: center;
			@extend .font-size-10,.font-color-describe,.mt-20;
		}
	}
</style>
